<%@ include file="../common/IncludeTop.jsp"%>
<style>
    .okTips{
        color: green;
    }
    .errorTips{
        color:red;
    }
</style>
<script>
    var xhr;
    function checkUsername()
    {
        var username=document.getElementById("username").value;
        //alert(username);//alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框
        xhr=new XMLHttpRequest();
        xhr.onreadystatechange=fun1;

        xhr.open("GET","usernameExist?username="+username,true);
        xhr.send(null);

    }
    function fun1()
    {
        console.log("abc")
        if(xhr.readyState===4)
        {
            if(xhr.status===200)
            {
                var tips=document.getElementById("usernameTips")
                var respnseInfo =xhr.responseText;
                // console.log(respnseInfo);
                if(respnseInfo==="Exist")
                {
                    tips.className="errorTips";
                    tips.innerText="Invalid";
                }
                else if(respnseInfo==="Not Exist")
                {
                    tips.className="okTips";
                    tips.innerText="Available";
                }
            }
        }
    }

</script>
<form action="update",method="post">
    <div id="Catalog">

        <h3>User Information</h3>
        <p>${sessionScope.warning}</p>

        <table>
            <tr>
                <td>User ID:</td>
                <td>
                    <input type="text" name="username" id="username" onblur="checkUsername();" value=${sessionScope.accounts.username} >
                    <span id="usernameTips"></span>
                </td>
            </tr>
            <tr>
                <td>New password:</td>
                <td><input type="text" name="password" /></td>
            </tr>
            <tr>
                <td>Repeat password:</td>
                <td><input type="text" name="repeatedPassword" /></td>
            </tr>
        </table>
        <%@ include file="IncludeAccountFields.jsp"%>

        <input type="submit" name="editAccount"  value="Save Account Information" />

        <a href="viewOrdersFrom">My Orders</a>
</form>

<%@ include file="../common/IncludeBottom.jsp"%>
